<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<meta name="decorator" content="sysDefault" content="text/html; charset=utf-8" />
<script src="${staticPath}/js/pospay/opendialog.js" type="text/javascript"></script>

<script type="text/javascript">
var num='${fn:length(list)}';
var list = Array();
var delList=Array();
/**************删除数组**************/
Array.prototype.remove=function(dx)
{

  if(isNaN(dx)||dx>this.length){return false;}
  for(var i=0,n=0;i<this.length;i++)
  {
      if(this[i]!=this[dx])
      {
          this[n++]=this[i]
      }
  }
  this.length-=1
}
/**************************/
$(document).ready(function() {
	for(var i=0; i<num; i++){
		list.push(i);
	}
	$("#save").click(function(e){
		var jsonStr="";
		var json="";
		if(list.length!=0){
			jsonStr = "[";
			for(var i=0; i< list.length; i++){
				jsonStr+=bulidToJson(list[i]);
			}
		    json =jsonStr.substr(0, jsonStr.length-1);
			json += "]";
		}
		$('#dataForm').attr('action',"${contextPath}/sys/syscoderule/save?sysCodeRuleEntry="+json+"&deleteEntry="+delList);
		$("#dataForm").submit();
	});
});
function addDetail(){
	  	var newRow = document.createElement ("tr");   
	    var newTd0 = document.createElement ("td"); 
	    var newTd1 = document.createElement ("td"); 
	    newTd1.setAttribute ("id","showStyle_td"+num);  //
	    var newTd2 = document.createElement ("td");
	    var newTd3 = document.createElement ("td");
	    var newTd4 = document.createElement ("td");   
	    var newTd5 = document.createElement ("td");   
	    var newTd6 = document.createElement ("td"); 
	    newTd0.innerHTML='<ossp:select onchange="chanageType(this.options[this.options.selectedIndex].value,'+num+')" dictType="CODETYPE" id="attribute'+num+'" class_="form-control" ></ossp:select> <input type="hidden" id="id'+num+'" class="form-control" >'
	    newTd1.innerHTML='<input type="text" id="showStyle'+num+'" class="form-control" >'
	    newTd2.innerHTML='<input type="text" id="initValue'+num+'" class="form-control" >'
	    newTd3.innerHTML='<input type="text" id="maxValue'+num+'" class="form-control" >'
	    newTd4.innerHTML='<input type="text" id="step'+num+'" class="form-control" >' 
	    newTd5.innerHTML='<input type="text" id="seq'+num+'" value='+num+' class="form-control" >'
	    newTd6.innerHTML='<a href="#" onclick="return delDetail(this,'+num+');" class="btn btn-danger" style="width: 100px;color:white;" >删除</a>'
	    newRow.appendChild (newTd0);     
	    newRow.appendChild (newTd1);
	    newRow.appendChild (newTd2);
	    newRow.appendChild (newTd3);
	    newRow.appendChild (newTd4); 
	    newRow.appendChild (newTd5);
	    newRow.appendChild (newTd6);
	    document.getElementById("sysCode").appendChild (newRow);
	    list.push(num);
	    num++;
}
function bulidToJson(rowIndex){
	var json="";
	var attribute =$("#attribute"+rowIndex).attr("value");
    var id=$("#id"+rowIndex).attr("value");  
	var showStyle=$("#showStyle"+rowIndex).attr("value");  
	var seq=$("#seq"+rowIndex).attr("value");  
	var initValue=$("#initValue"+rowIndex).attr("value"); 
	var maxValue=$("#maxValue"+rowIndex).attr("value"); 
	var step=$("#step"+rowIndex).attr("value"); 
	if(initValue==null||initValue==''){	
		initValue=0;
	}
	if(maxValue==null||maxValue==''){	
		maxValue=0;
	}
	if(step==null||step==''){	
		step=0;
	}if(id==null||id==''){	
		id=0;
	}
	json +="{'id':'"+id+"','attribute':'"+attribute+"','showStyle':'"+showStyle+"',"
	json+="'seq':'"+seq+"','initValue':'"+initValue+"','maxValue':'"+maxValue+"','step':'"+step+"'"
    json+="},"
	return json;
	
}
//删除明细
function delDetail(obj,num){
	var $this = $(obj);
	var flag = confirm("是否删除明细数据","确认删除？");
	if (flag) {
		if(!isNaN($("#id"+num).attr("value"))){
		 	delList.push($("#id"+num).attr("value"));
		 	list.remove(num);
		}
		$this.closest('tr').remove()
	}
	
}
function chanageType(value,rowIndex,showStyle,attribute,initValue,maxValue,step){
	if(value==attribute){
		$("#showStyle"+rowIndex).val(showStyle)
		$("#attribute"+rowIndex).val(attribute)
		$("#initValue"+rowIndex).val(initValue)
		$("#maxValue"+rowIndex).val(maxValue)
		$("#step"+rowIndex).val(step)
		
	}else{
		
		$("#showStyle"+rowIndex).val('')
		$("#initValue"+rowIndex).val('')
		$("#maxValue"+rowIndex).val('')
		$("#step"+rowIndex).val('')
	}
	if(value==20){
		$('#showStyle_td'+rowIndex).html('<ossp:select id="showStyle'+rowIndex+'" dictType="showStyleDate"  class_="form-control" ></ossp:select>');
	}else{
		$('#showStyle_td'+rowIndex).html('<input type="text" id="showStyle'+rowIndex+'" class="form-control" >');
	}
	
	if(value==10){
		$('#showStyle'+rowIndex).attr('disabled',"disabled");
		$('#initValue'+rowIndex).removeAttr("disabled");
		$('#maxValue'+rowIndex).removeAttr("disabled");
		$('#step'+rowIndex).removeAttr("disabled");
	} 
	
	if(value==20||value==30){
		$('#showStyle'+rowIndex).attr('disabled',"disabled");
		$('#initValue'+rowIndex).attr('disabled',"disabled");
		$('#maxValue'+rowIndex).attr('disabled',"disabled");
		$('#step'+rowIndex).attr('disabled',"disabled");
		$('#showStyle'+rowIndex).removeAttr("disabled");
	}
	
	if(value==''){
		$('#showStyle'+rowIndex).attr('disabled',"disabled");
		$('#initValue'+rowIndex).attr('disabled',"disabled");
		$('#maxValue'+rowIndex).attr('disabled',"disabled");
		$('#step'+rowIndex).attr('disabled',"disabled");
	}
}
function changeSelect(id,value){
	$(""+id+"").val(value);
}
</script>
</head>
<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-xs-12">
				<form:form id="dataForm" modelAttribute="sysCodeRule"
					action="${contextPath}/sys/syscoderule/save" method="post"
					class="form-horizontal" role="form">
					
					<div class="panel panel-default">
						<div class="panel-heading">
							<h3 class="panel-title">
								新增数据 <a class="btn btn-default btn-sm pull-right" role="button"
									href="${contextPath}/sys/syscoderule/list" >返回</a>
							</h3>
						</div>
						<div class="panel-body">
							<form:hidden path="id" />
							<tags:message content="${message}" />
							<div class="form-group">
								<label for="saleNo" class="col-sm-2 control-label">编码:</label>
								<div class="col-sm-2">
									<form:input id="number" path="number" maxlength="20" class="form-control required" />
									</div> 
								</div>
							</div>
							<div class="form-group">
								<label for="saleNo" class="col-sm-2 control-label">名称:</label>
								<div class="col-sm-2">
									<form:input id="name"  path="name" maxlength="20" class="form-control required" />
								</div>
							</div>
							<div class="form-group">
								<label for="salenoOffline" class="col-sm-2 control-label">类型:</label>
								<div class="col-sm-2">
								<ossp:select  id="systemTypeSelect" onchange="changeSelect('#systemType',this.options[this.options.selectedIndex].value)" defaultSelected="${sysCodeRule.systemType}" dictType="RULECODTYPE" class_="form-control" ></ossp:select>
								<form:hidden id="systemType" path="systemType"/>
								</div>
							</div>

						<div class="panel-heading">
							<h3 class="panel-title">
								新增明细数据 <a class="btn btn-success btn-sm pull-right" role="button"
									href="javascript:void(0)" onclick="addDetail();" style="color:white;">新增一条</a>
							</h3>
						</div>
						<div class="panel panel-defaulty" id="detailList">
								<table class="table table-striped table-bordered table-hover">
								<thead>
									<tr>
										
										<th>属性</th>
										<th>显示格式</th>
										<th>初始值</th>
										<th>最大值</th>
										<th>步长</th>
										<th>排序</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody id="sysCode">
								<c:if test="${list != null}">
									<c:forEach items="${list}" var="sysCodeDetail" varStatus="i">
									<tr>
										<td>
										<ossp:select   onchange="chanageType(this.options[this.options.selectedIndex].value,${i.index},'${sysCodeDetail.showStyle}',${sysCodeDetail.attribute},'${sysCodeDetail.initValue}','${sysCodeDetail.maxValue}','${sysCodeDetail.step}')" defaultSelected="${sysCodeDetail.attribute}" dictType="CODETYPE" id="attribute${i.index}" class_="form-control" >
										</ossp:select> 
										
										<input type="hidden" id="id${i.index}" class="form-control" value="${sysCodeDetail.id}" >
										
										</td>
									   	<td id="showStyle_td${i.index}">
										   	<c:choose>
										   		<c:when test="${sysCodeDetail.attribute  == '30'||sysCodeDetail.attribute  == '10'}">
										   			<input type="text" id="showStyle${i.index}"    <c:choose>	 <c:when test="${sysCodeDetail.attribute  == '10'}"> disabled="disabled" </c:when>  </c:choose>   class="form-control" value="${sysCodeDetail.showStyle}">
										   		</c:when> 
										   		<c:when test="${sysCodeDetail.attribute  == '20'}">
										   			<ossp:select id="showStyle${i.index}" dictType="showStyleDate"  class_="form-control"  defaultSelected="${sysCodeDetail.showStyle}" ></ossp:select>
										   		</c:when> 
										   	</c:choose>
									   	</td>
									    <td><input type="text" id="initValue${i.index}" class="form-control" <c:choose> <c:when test="${sysCodeDetail.attribute != '10'}"> disabled="disabled" </c:when> </c:choose>   value="${sysCodeDetail.initValue}"></td>
									    <td><input type="text" id="maxValue${i.index}" class="form-control" <c:choose> <c:when test="${sysCodeDetail.attribute != '10'}"> disabled="disabled" </c:when> </c:choose> value="${sysCodeDetail.maxValue}"></td>
									    <td><input type="text" id="step${i.index}" class="form-control" <c:choose> <c:when test="${sysCodeDetail.attribute != '10'}"> disabled="disabled" </c:when> </c:choose> value="${sysCodeDetail.step}">  </td> 
									    <td><input type="text" id="seq${i.index}" class="form-control" value="${sysCodeDetail.seq}"></td>
	   									 <td><a href="#" onclick="return delDetail(this,${i.index});" class="btn btn-danger" style="width: 100px;color:white;" >删除</a></td>
									</c:forEach>
								</c:if>
								</tbody>
							</table>
						</div>
						
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<input class="btn btn-primary" id="save" type="button" value="保 存" /> 
								<a class="btn btn-default" href="${contextPath}/sys/syscoderule/list" >返 回</a>
							</div>
						</div>
					</div>
					
				</form:form>
			</div>
		</div>
	</div>
</body>
</html>